import React from 'react'
import { connect } from 'dva'
import { FormattedMessage, getLocale, setLocale } from 'umi/locale'
import {
  Table,
  Row,
  Button,
  Input,
  Form,
  Col,
  Upload,
  Icon,
  message
} from 'antd'
const FormItem = Form.Item

@connect(({ puzzlecards, loading }) => ({
  puzzlecards,
  loading: loading.effects['puzzlecards/findTableData']
}))
@Form.create()
export default class List extends React.Component {
  state = {
    addOrNot: false
  }
  add = () => {
    this.setState({ addOrNot: true })
  }
  changelang = () => {
    const locale = getLocale()
    if (!locale || locale === 'zh-CN') {
      setLocale('en-US')
    } else {
      setLocale('zh-CN')
    }
  }
  handleSubmit = e => {
    e.preventDefault()
    const { form, dispatch } = this.props
    let req = form.getFieldsValue()
    dispatch({
      type: 'puzzlecards/add',
      payload: { ...req }
    })
    this.setState({ addOrNot: false })
    form.resetFields()
  }
  delete = record => {
    const { dispatch } = this.props
    dispatch({
      type: 'puzzlecards/delete',
      payload: { id: record.id, pageNum: 1, pageSize: 5 }
    })
  }
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'puzzlecards/findTableData',
      payload: { pageNum: 1, pageSize: 5 }
    })
  }
  paginationChange = (pageNum, pageSize) => {
    const { dispatch } = this.props
    dispatch({
      type: 'puzzlecards/findTableData',
      payload: { pageNum, pageSize }
    })
  }
  render() {
    const cloumns = [
      {
        title: '编号',
        dataIndex: 'id'
      },
      {
        title: '年龄',
        dataIndex: 'age'
      },
      {
        title: '姓名',
        dataIndex: 'name'
      },
      {
        title: '操作',
        dataIndex: 'delete',
        render: (_, record) => {
          return <a onClick={() => this.delete(record)}>delete</a>
        }
      }
    ]
    const props = {
      name: 'file',
      action: 'http://localhost:8080/upload',
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList)
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`)
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`)
        }
      }
    }
    const {
      loading,
      puzzlecards: { pagination, elements },
      form: { getFieldDecorator }
    } = this.props
    const { addOrNot } = this.state
    const { totalElements, totalPages, pageNum } = pagination
    console.log(pagination)
    const paginationProps = {
      current: pageNum,
      total: totalElements,
      showSizeChanger: true,
      showQuickJumper: true,
      defaultPageSize: 5,
      pageSizeOptions: ['5', '10', '15', '20'],
      onShowSizeChange: this.paginationChange,
      onChange: this.paginationChange,
      showTotal: () => {
        return `共${totalElements}条数据 , 共${totalPages}页`
      }
    }
    return (
      <div>
        <FormattedMessage id="navbar.lang" />
        <Row>
          <Button onClick={() => this.changelang()}>切换语言</Button>
        </Row>
        <Row>
          <Input style={{ marginBottom: 10, width: 200 }} type="file" />
        </Row>
        <Row>
          <a
            href="https://c-ssl.duitang.com/uploads/item/201604/16/20160416203342_PUsta.jpeg"
            download="草原.jpeg"
          >
            Download file
          </a>
        </Row>
        <Row>
          <Upload {...props}>
            <Button>
              <Icon type="upload" /> Click to Upload
            </Button>
          </Upload>
        </Row>
        <Row style={{ marginBottom: 10 }}>
          <Button onClick={this.add}>录入学生信息</Button>
        </Row>
        <Row style={{ display: addOrNot ? 'block' : 'none' }}>
          <Form onSubmit={this.handleSubmit}>
            <Row>
              <Col span={12}>
                <FormItem
                  label="年龄"
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 8 }}
                >
                  {getFieldDecorator('age')(
                    <Input style={{ width: '100%' }} placeholder="请输入" />
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  label="姓名"
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 8 }}
                >
                  {getFieldDecorator('name')(
                    <Input style={{ width: '100%' }} placeholder="请输入" />
                  )}
                </FormItem>
              </Col>
            </Row>
            <FormItem>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </FormItem>
          </Form>
        </Row>
        <Table
          dataSource={elements}
          columns={cloumns}
          loading={loading}
          rowKey="id"
          pagination={paginationProps}
        />
      </div>
    )
  }
}
